<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>父子组件的写法</title>
  </head>
  <body>
    <div id="app">
      <my-root></my-root>
    </div>

    <template id="root">
      <div style="width: 100%; height: 500px; background-color: aqua">
        <input type="color" v-model="color" />
        <!-- 
        在父组件调用子组件的地方，添加自定义的属性，
        如果属性的值是变量，boolean类型，number类型，对象，数组，null， undefined,正则，
        则需要使用绑定属性
       -->
        <my-box :color="color"></my-box>
      </div>
    </template>

    <template id="box">
      <div
        :style="{width:'300px',height:'300px','background-color':color}"
      ></div>
    </template>

    <script src="../lib/vue.global.js"></script>
    <script>
      // 在子组件定义的地方，添加props选项
      // props 选项主要有2种写法
      // 第一种写法为数组，数组的元素即为 父组件传递给子组件的 自定义属性名
      // 后续就可以在页面模版种使用 自定义的属性名 渲染了
      // 第二种写法为对象，对象的 key 值为自定义的属性名， value 值为数据类型
      const Box = {
        props: {
          color: String,
        },
        template: "#box",
        data() {
          return {
            bgColor: "#010",
          };
        },
      };

      const Root = {
        template: "#root",
        components: {
          MyBox: Box,
        },
        data() {
          return {
            color: "#010",
          };
        },
      };

      const app = Vue.createApp({
        components: {
          MyRoot: Root,
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
